<template>
    <el-avatar class="headerimg" :icon="UserFilled" />
    <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
            userName
            <el-icon>
                <arrow-down />
            </el-icon>
        </span>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item command="1">Action 1</el-dropdown-item>
                <el-dropdown-item command="2">Action 2</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script setup>
import { UserFilled } from '@element-plus/icons-vue'
import { ArrowDown } from '@element-plus/icons-vue'

const handleCommand = (e) => {
    console.log(e, "command")
}
</script>

<style lang="scss" scoped>
.headerimg {
    margin-right: 10px;
}

.el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}
</style>